<template>
  <div class="block-box">
    <div class="chart-box" ref="chartRef"></div>
    <div class="title">
      <h4 class="name">{{ data.classifyName }}</h4>
      <p class="unit">{{ unit }}</p>
    </div>
    <ul class="intro mt-2">
      <li>标准值：{{ setVal('normal') }}</li>
      <li>内控值：{{ setVal('control') }}</li>
    </ul>
  </div>
</template>
<script setup lang="ts">
import { ref, Ref, toRefs, watch, computed, onMounted } from 'vue'
import { useECharts } from '@/hooks/web/useECharts';
import { colorObj } from './type.data'
import 'echarts-liquidfill'

const props = defineProps({
  width: {
    type: String as PropType<string>,
    default: '5.5vw',
  },
  height: {
    type: String as PropType<string>,
    default: '5.5vw',
  },
  data: {
    type: Object,
    default: () => { }
  }
})
const { data } = toRefs(props);

const chartRef = ref<HTMLDivElement | null>(null);
const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>);

onMounted(() => {
  setData()
})

watch(data, (val) => {
  setData()
}, { deep: true });

const unit = computed(() => {
  return data.value.unit ? `（${data.value.unit}）` : ''
})

const setVal = (type) => {
  const val = data.value[type]
  if (val.min && val.max) {
    return `${val.min} - ${val.max}`
  } else if (val.min) {
    return `> ${val.min}`
  } else if (val.max) {
    return `< ${val.max}`
  }
  return '-'
}

const getColor = () => {
  // 不超标为绿色，超内控值为黄色，超标准值为红色。
  const { value: val, normal: { min: nMin, max: nMax }, control: { min: cMin, max: cMax } } = data.value

  // PH值
  if (nMin && nMax && nMin && nMax) {
    // 内控区间为绿色
    if (val >= cMin && val <= cMax) {
      return colorObj.green
    }
    // 标准区间内返回黄色
    if (val >= nMin && val <= nMax) {
      return colorObj.yellow
    }
    // 超出区间为红色
    const min = Math.min(nMin, nMin)
    const max = Math.max(nMax, cMax)
    if (val < min || val > max) {
      return colorObj.red
    }
  }

  if (val > nMax) {
    return colorObj.red
  }

  if (val < cMax) {
    return colorObj.green
  }
  // 超内控值为黄色
  if (val < nMax && val > cMax) {
    return colorObj.yellow
  }
  return colorObj.red
}

const setData = () => {
  const { value: val, normal: { max, min }, classifyName } = data.value;
  let value = val / max;
  if (classifyName.includes('PH')) {
    value = parseFloat(((val - min) / (max - min)).toFixed(3));
  }
  const color = getColor()
  const option1 = {
    // 圆环内部文字
    title: [
      {
        text: val,
        left: '40%',
        top: 'center',
        textAlign: 'center',
        textStyle: {
          fontSize: 14,
          color: '#fff',
        },
      },

    ],
    series: [{
      type: 'liquidFill',
      radius: '80%',
      z: 6,
      center: ['50%', '50%'],
      waveLength: 100,  // 波长，值越大波纹越宽
      amplitude: 5,  // 波幅，值越小波纹的高度越小
      backgroundStyle: {
        color: {
          type: 'radial',
          x: 0.5,
          y: 0.5,
          r: 0.5,
          colorStops: [
            {
              offset: 0,
              color: '#21232a',
            },
            {
              offset: 0.75,
              color: '#131725',
            },
            {
              offset: 1,
              color: '#0c1226',
            },
          ],
          globalCoord: false,
        },
      },
      color: [
        {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            {
              offset: 1,
              color: `rgb(${color[0]},.7)`,
            },
            {
              offset: 0,
              color: `rgb(${color[1]},.7)`,
            },
          ],
          globalCoord: false,
        },
        {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            {
              offset: 1,
              color: `rgb(${color[0]},.5)`,
            },
            {
              offset: 0,
              color: `rgb(${color[1]},.5)`,
            },
          ],
          globalCoord: false,
        },
        {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            {
              offset: 1,
              color: `rgb(${color[0]},.2)`,
            },
            {
              offset: 0,
              color: `rgb(${color[1]},.2)`,
            },
          ],
          globalCoord: false,
        },
      ],
      data: [value + 0.02,
      {
        value: value - 0.01,
        direction: 'left',
      },
      value - 0.01,
      ],
      label: {
        normal: {
          formatter: '',
        }
      },
      outline: {
        show: true,
        itemStyle: {
          borderWidth: 0,
        },
        borderDistance: 0,
      }
    },
    {
      //外发光
      type: 'pie',
      z: 1,
      zlevel: -1,
      radius: ['80%', '85%'],
      center: ['50%', '50%'],
      hoverAnimation: false,
      clockWise: false,
      itemStyle: {
        normal: {
          borderWidth: 20,
          color: `rgb(${color[1]})`,
        },
      },
      label: {
        show: false,
      },
      data: [100],
    },
    ]
  }
  // console.log(option1);
  //   const option = {
  //     series: [{
  //         type: 'liquidFill',
  //         radius: '100%',
  //         data: [0.8, 0.45, 0.4, 0.3],
  //         label: {
  //             normal: {
  //                 // textStyle: {
  //                     color: 'red',
  //                     insideColor: 'yellow',
  //                     fontSize: 18
  //                 // }
  //             }
  //         }
  //     }]
  // }
  setOptions(option1)
}
</script>

<style lang="scss" scoped>
.block-box {
  display: flex;
    flex-direction: column;
  .chart-box {
    margin: 0 auto;
    width: 10vh;
    height: 10vh;
   

    @media screen and (max-width: 800px) {
      width: 10vh;
      height: 10vh
    }
  }

  .title {
    color: #a9a5ee;
    font-size: 1.6vh;
    line-height: 1.6vh;
    height: 3.6vh;
    margin-top: 5px;
    text-align: center;
    .name,
    .unit {
      margin: 0;
    }
  }

  .intro {
    color: #a9a5ee;
    font-size: 1.2vh;
    text-align: center;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
}
</style>
